<template>
  <div class="compile">
    <ProfileTopNav title="编辑资料" path="/user" />
    <div class="header">
      <!-- <router-link to="/user" class="iconfont iconjiantou2"></router-link>
      编辑资料 -->
      <div class="picture">
        <!-- 头像 上传框 -->
        <!-- 这里添加一个优化, 没有头像的情况, 有两种, 1.真的没有 2.只是数据还没到
            只有前面这种真的没有的情况才需要显示默认头像, 所以加上 nickname 做辅助判断 -->
        <van-uploader :after-read="afterRead" v-if="userInfo.nickname">
          <img
            v-if="userInfo.head_img"
            :src="
              // 过滤器 凡是没有基础路径的图片为他添加
              userInfo.head_img | flxImgUrl
            "
            alt=""
          />
          <img v-else src="https://img.yzcdn.cn/vant/leaf.jpg" alt="" />
        </van-uploader>
      </div>
    </div>

    <van-image-preview v-model="isShowImage" :images="images">
    </van-image-preview>
    <ProfileBar label="预览头像" @click.native="isShowImage = true" />
    <ProfileBar
      label="昵称"
      :desc="userInfo.nickname"
      @click.native="isShowNickname = true"
    />
    <ProfileBar
      label="密码"
      desc="******"
      @click.native="isShowPassword = true"
    />
    <ProfileBar
      label="性别"
      @click.native="isShowGender = true"
      :desc="userInfo.gender === 1 ? '男' : '女'"
    />

    <!-- 静态布局结束  一下是vant组件  -->

    <!-- 昵称弹出框 -->
    <van-dialog
      v-model="isShowNickname"
      title="修改昵称"
      show-cancel-button
      @confirm="setNickname"
    >
      <van-field v-model="newNickName" placeholder="请输入用户名" />
    </van-dialog>

    <!-- 密码弹出框 -->
    <van-dialog
      v-model="isShowPassword"
      title="修改密码"
      show-cancel-button
      @confirm="setPassword"
    >
      <van-field v-model="newPassWord" placeholder="请输入用户名" />
    </van-dialog>

    <!-- 性别选项框 -->
    <van-action-sheet
      v-model="isShowGender"
      :actions="actions"
      cancel-text="取消"
      close-on-click-action
      @cancel="onCancel"
      @select="setGender"
    />
    <Return father=".compile" paths="/user" />
  </div>
</template>

<script>
import ProfileBar from "@/components/ProfileBar";
import ProfileTopNav from "@/components/TopNav";
import Return from "@/components/Return";
export default {
  components: {
    ProfileBar,
    ProfileTopNav,
    Return,
  },
  data() {
    return {
      userInfo: {},
      isShowNickname: false,
      isShowPassword: false,
      isShowGender: false,
      isShowImage: false,
      newNickName: "",
      newPassWord: "",
      images: ["https://img.yzcdn.cn/vant/apple-1.jpg"],
      actions: [{ name: "女" }, { name: "男" }],
    };
  },
  created() {
    this.loadPage();
    // console.log(User);
  },
  methods: {
    // 获取用户信息
    loadPage() {
      this.$axios({
        url: "/user/" + localStorage.getItem("userId"),
      }).then((res) => {
        console.log(res);
        const { message, data } = res.data;
        if (message === "获取成功") {
          this.userInfo = data;

          // 获取预览图片的路径
          if (data.head_img) {
            this.images = [this.$axios.defaults.baseURL + data.head_img];
          } else {
            this.images = ["https://img.yzcdn.cn/vant/leaf.jpg"];
          }
        }
      });
    },
    // 封装修改资料方法  每次修改数据其实改变的只是传进去的 data 数据 其他的过程其实是一样的
    sendCompile(data) {
      this.$axios({
        method: "post",
        url: "/user_update/" + localStorage.getItem("userId"),
        data,
      }).then((res) => {
        this.loadPage();
      });
    },
    // 昵称修改
    setNickname() {
      const data = { nickname: this.newNickName };
      this.sendCompile(data);
      this.newNickName = "";
    },
    // 密码修改
    setPassword() {
      const data = { password: this.newPassWord };
      this.sendCompile(data);
      this.newPassWord = "";
    },
    // 性别栏取消
    onCancel() {
      this.$toast("取消");
    },
    // 性别 上传修改
    setGender(action, index) {
      console.log(index);
      const data = { gender: index };
      this.sendCompile(data);
    },
    // 头像修改 需要先请求回图片地址
    afterRead(fileObj) {
      const formData = new FormData();
      // 获取必填请求参数 file
      formData.append("file", fileObj.file);
      // 文件上传请求  获取url
      this.$axios({
        method: "post",
        url: "/upload",
        data: formData,
      }).then((res) => {
        // 取出 成功回调回来的图片地址
        const data = { head_img: res.data.data.url };
        this.sendCompile(data);
      });
    },
  },
};
</script>

<style lang="less" scoped>
.compile {
  position: relative;
  left: 0;
  background-color: #f2f2f2;
  min-height: 100vh;
}
.header {
  position: relative;
  padding: 20 / 360 * 100vw;
  font-size: 16 / 360 * 100vw;
  font-weight: 600;

  text-align: center;

  .iconjiantou2 {
    position: absolute;
    top: 20 / 360 * 100vw;
    left: 20 / 360 * 100vw;

    font-size: 16 / 360 * 100vw;
  }
  .picture {
    position: relative;
    img {
      margin: 30 / 360 * 100vw auto;
      width: 100 / 360 * 100vw;
      height: 100/ 360 * 100vw;
      border-radius: 50%;
      overflow: hidden;
    }
    // vant上传图片
    // .van-uploader {
    //   position: absolute;

    //   left: 130 / 360 * 100vw;
    //   top: 48 / 360 * 100vw;

    //   opacity: 0;
    // }
  }
}
</style>